<template>
    <div class="accessBox">
        <div class="title" :class="{'hasSubTitle':subtitle}">
            <span class="back" @click="close"><img src="/images/back.png"/></span>
            {{title}}
            <p v-if="subtitle">{{subtitle}}</p>
            <div class="cds" v-if="showTime">
                <count-down ref="cdNumber" :time="showTime" @over="close"/>s
            </div>
        </div>
        <div class="acMian"><slot/></div>
    </div>
</template>

<script>
import { inject } from 'vue'
import countDown from '@/components/countDown.vue'
export default {
    props:['title','subtitle','showTime'],
    components:{
        countDown
    },
    setup(props,context) {
        const close = inject('close')  // 关闭弹窗

        return {
           close 
        }
    },

}
</script>
<style lang="scss" scoped>
    .accessBox{
        width: 778px;
        height: 658px;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        .title{
            position: relative;
            z-index: 10;
            text-align: center;
            width: 100%;
            height: 165px;
            line-height: 165px;
            font-size: 50px;
            font-weight: 600;
            color: #fff;
            background: url(/images/dlbg.png) left top repeat-x;
            &.hasSubTitle{
                padding-top: 28px;
                line-height: 56px;
                p{
                    font-size: 30px;
                }
            }
            .back{
                position: absolute;
                z-index: 10;
                height: 43px;
                width: 43px;
                top: 62px;
                left:19px;
                cursor:pointer;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .cds{
                position: absolute;
                z-index: 10; 
                right: 30px;
                top: 0;
                color: #ff7263;
                font-size: 44px;
                font-weight: 600;
                line-height: 160px;
            }
        }
    }
</style>